<template>
  <view class="UGO-my">
    <view class="UGO-my-via-login">
      <view v-if="token"
            class="UGO-my-via">
        <u-image width="172rpx"
                 height="172rpx"
                 mode="wdithFix"
                 shape="circle"
                 :src="userInfo.avatarUrl"></u-image>
        <text>小小怪</text>
      </view>
      <view v-else
            class="UGO-my-login">
        <u-button :custom-style="customStyle" @click="handleLogin">去登陆</u-button>
      </view>
    </view>
    <view class="UGO-icon">
      <u-icon :custom-style="iconStyle"
              name="coupon"
              label="待付款"
              color="#999"
              size="80"></u-icon>
      <u-icon :custom-style="iconStyle"
              name="car"
              label="待收货"
              color="#999"
              size="80"></u-icon>
      <u-icon :custom-style="iconStyle"
              name="rmb-circle"
              label="退货/退款"
              color="#999"
              size="80"></u-icon>
      <u-icon :custom-style="iconStyle"
              name="order"
              label="全部订单"
              color="#999"
              size="80"></u-icon>
    </view>
    <view class="UGO-cell">
      <u-cell-group>
        <u-cell-item icon="server-fill"
                    :arrow="false"
                     title="联系客服"
                     value="400-618-4000"></u-cell-item>
        <u-cell-item icon="email"
                    :arrow="false"
                     title="意见反馈"></u-cell-item>
        <u-cell-item icon="info-circle"
                    :arrow="false"
                     title="当前版本"
                     value="v4.1.1"></u-cell-item>
      </u-cell-group>
    </view>
  </view>

</template>

<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
        // 去登陆按钮样式
      customStyle: {
        color: '#fff',
        width: '352rpx',
        height: '88rpx',
        backgroundColor: '#07C160',
      },
        // icon样式
      iconStyle: {
        display: 'flex',
        flexDirection: 'column',
      },
    }
  },
  computed: {
    ...mapState({token:state=>state.user.token,userInfo:state=>state.user.userInfo})  
  },
  methods:{
    //   登录跳转
      handleLogin(){
          uni.navigateTo({url:'/pages/WeChatAuthorization/WeChatAuthorization'});
      }
  }
}
</script>

<style lang="scss" scoped>
.UGO-my {
  height: 100vh;
  background-color: #f9f9f9;
  .UGO-my-via-login {
    position: relative;
    height: 329rpx;
    background-color: #fff;
    .UGO-my-via,
    .UGO-my-login {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .UGO-my-via {
      text-align: center;
      u-image {
        width: 172rpx;
        height: 172rpx;
        border-radius: 50%;
        overflow: hidden;
      }
    }
  }
  .UGO-icon {
    display: flex;
    height: 144rpx;
    margin: 20rpx 12rpx;
    background-color: #fff;
    align-items: center;
    u-icon {
      flex: 1;
      display: flex;
      justify-content: center;
    }
  }
  .UGO-cell{
      margin: 0 12rpx;
  }
}
</style>